<template>
  <el-aside width="200px" class="sidebar">
    <el-menu
      mode="vertical"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="$route.path"
      router
    >
      <el-menu-item index="/system-evolution">
        <span>体系演进</span>
      </el-menu-item>
      <el-menu-item index="/knowledge-graph" @click.prevent="openKnowledgeGraph">
        <span>知识图谱</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
const openKnowledgeGraph = () => {
  window.open('http://localhost:5777', '_blank')
}
</script>

<style scoped>
.sidebar {
  height: 100vh;
  border-right: 1px solid #e5e6eb;
}
.el-menu {
  border-right: none;
}
</style>